<template>
  <div>
    <div class="subject-btn" :class="bgClass" >
      <h3>{{subjectName}}</h3>
    </div>
  </div>
</template>

<script>

export default {
  name: "subject-item",
  props: {
    bgClass: {
      type: String,
      default: ""
    },
    subjectName: {
      type: String,
      default: ""
    }
  },
  data() {
    return {

    };
  },
  computed: {

  },
  mounted() {},
  methods: {

  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.subject-btn {
  width: 150px;
  height: 150px;
  background-color: #f5f9ff;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  background-repeat: no-repeat;
  background-position: center;
  &:hover {
    background-color: #f1f1f1;
  }
  h3 {
    font-size: 20px;
    font-weight: bold;
    font-stretch: normal;
    line-height: 64px;
    color: #323233;
    position: relative;
    top: -48px;
  }
}
.photo-basic {
  background-image: url(./../../images/photo-basic.png);
  background-repeat: no-repeat;
  background-size: 100% 77%;
}
.keyword {
  background-image: url(./../../images/keyword.png);
}
.technique {
  background-image: url(./../../images/technique.png);
}
.normal-exercise {
  background-image: url(./../../images/normal-exercise.png);
}
.simulate-exam {
  background-image: url(./../../images/simulate-exam.png);
}
.deepen-memory {
  background-image: url(./../../images/deepen-memory.png);
}
.simplify {
  background-image: url(./../../images/simplify.png);
}
.free-trial {
  background-image: url(./../../images/free-trial.png);
}
.single-choice {
  background-image: url(./../../images/single-choice.png);
}
.multi-choice {
  background-image: url(./../../images/multi-choice.png);
}
.judge {
  background-image: url(./../../images/judge.png);
}
.simulate-exercise {
  background-image: url(./../../images/simulate.png);
}
.vip {
  background-image: url(./../../images/vip.png);
}
</style>
